<html>
<script src="../src/jquery-1.7.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/button.css" />
<script>
function showIDLE_Message(loader_title){
	if(loader_title == null){loader_title = "Laden..";}
	$('#idle-title').html(loader_title);
	$('#idle-display').fadeIn('500');
	$('#idle-background').fadeIn('500');
}

function hideIDLE_Message(){
	$('#idle-display').hide();
	$('#idle-background').hide();
}

</script>
<style>
#idle-display {
  position: absolute;
  top: 50%;
  /*bottom: 50%;*/
  left: 50%;
  /*right: 50%;*/
  background-image: url('./message.png');
  background-repeat: no-repeat; 
  background-position:0px 0px;
  color: #000;
  z-index: 9999;
  display: none;
  text-align: center;
  width: 550px;
  height: 305px;
  margin-top: -152px; /* Half the height */
  margin-left: -275px; /* Half the width */
  padding-top: 15px;
  line-height: 6pt;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

#idle-content{
	position:relative;
	top: 60px;
	left: 40px;
	width: 470px;
	text-align: left;
	line-height: 100%;
}
#idle-title {
	position: relative;
	text-align: left;
	top: 40px;
	left: 130px;
	
	
}
#idle-icon {
	z-index: 10000;
	width:70px;
	height:70px;
	
	position:absolute;
	top:40px;
	left:40px;
	background-image: url('./clock.png');
	background-repeat: no-repeat; 
}
#idle-background {
  position: absolute;
  top: 0;
  bottom: 0%;
  left: 0;
  right: 0%;
  background-color: black;
  z-index: 9998;
  display: none;
  text-align: center;
  width: 100%;
  padding-top: 25px;
  opacity:0.8;
  filter:alpha(opacity=80);
}
#idle-buttons{
	position: absolute;
	right: 55px;
	top: 225px;	
	
}
#idle-password{
	position: absolute;
	left: 45px;/*55px;*/
	top: 225px;	
	height: 29px;
	width: 240px;
	font-size: 24px;
	border: 1px solid #ccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
}
#idle-password-info{
	position: absolute;
	left: 45px;/*55px;*/
	top: 225px;	
	height: 29px;
	width: 240px;
	font-size: 24px;
	color: #ccc;
	text-align: center;
	border: 1px solid #ccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
}
</style>
<a href="#" onclick="showIDLE_Message('U was langer dan 5 min inactief');">Opslaan</a>

<!---IDLE Message-->
<div id="idle-background"></div>
<div id="idle-display"><a href="javascript:void('0');" id="idle-icon"></a><h3 id="idle-title">U was langer dan 5 min inactief.</h3><div id="idle-content">Als u langer dan 5 min niets op het scherm doet moet u uit veiligheidsoverwegingen opnieuw uw wachtwoord invoeren om verder te kunnen werken</div><input type="password" name="p" value="" id="idle-password" style="display:none;" onblur="if($(this).val() == ''){$('#idle-password-info').show();$('#idle-password').hide();}"/><input type="text" name="x" value="Wachtwoord" id="idle-password-info" onclick="$('#idle-password').show();$('#idle-password-info').hide();$('#idle-password').focus();"/><div class="but" id="idle-buttons"><a href="javascript:void('0');" class="positive" name="save" id="save_butt" onclick=""><img src="../images/icon-apply.png" alt=""/>Inloggen</a><a href="javascript:void('0');" onclick="" class="negative"><img src="../images/icon-cross.png" alt=""/>Afmelden</a></div></div>
<!--END IDLE Message-->

